{% extends 'encyclopedia/base.html' %}

{% block title %}相机列表 - 相机百科{% endblock %}

{% block content %}
    <div class="row mb-4">
        <div class="col-lg-8">
            <h1>相机列表</h1>
        </div>
        <div class="col-lg-4">
            <div class="input-group">
                <form method="get" class="w-100">
                    <div class="input-group">
                        <select name="category" class="form-select" aria-label="分类筛选">
                            <option value="">所有分类</option>
                            {% for category in categories %}
                                <option value="{{ category.id }}" {% if request.GET.category == category.id|stringformat:"s" %}selected{% endif %}>{{ category.name }}</option>
                            {% endfor %}
                        </select>
                        <input type="text" name="search" class="form-control" placeholder="搜索相机..." value="{{ request.GET.search }}">
                        <button class="btn btn-primary" type="submit">搜索</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="row">
        {% for camera in cameras %}
            <div class="col-md-6 col-lg-4">
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title">{{ camera.title }}</h5>
                        <h6 class="card-subtitle mb-2 text-muted">品牌：{{ camera.brand }}</h6>
                        <p class="card-text text-muted">分类：<a href="{% url 'encyclopedia:category_detail' camera.category.id %}">{{ camera.category.name }}</a></p>
                        <p class="card-text">{{ camera.content|truncatechars:100 }}</p>
                        <div class="d-flex justify-content-between">
                            <a href="{% url 'encyclopedia:camera_detail' camera.id %}" class="btn btn-primary">查看详情</a>
                            <a href="{% url 'encyclopedia:camera_edit' camera.id %}" class="btn btn-secondary">编辑</a>
                        </div>
                    </div>
                    <div class="card-footer text-muted">
                        创建于：{{ camera.created_at|date:"Y-m-d" }}
                    </div>
                </div>
            </div>
        {% empty %}
            <div class="col-12">
                <div class="alert alert-warning" role="alert">
                    没有找到符合条件的相机信息。
                </div>
            </div>
        {% endfor %}
    </div>

    <!-- 分页控件 -->
    {% if is_paginated %}
        <nav aria-label="分页导航" class="mt-4">
            <ul class="pagination justify-content-center">
                {% if page_obj.has_previous %}
                    <li class="page-item">
                        <a class="page-link" href="?page={{ page_obj.previous_page_number }}{% if request.GET.category %}&category={{ request.GET.category }}{% endif %}{% if request.GET.search %}&search={{ request.GET.search }}{% endif %}">上一页</a>
                    </li>
                {% else %}
                    <li class="page-item disabled">
                        <a class="page-link" href="#" tabindex="-1" aria-disabled="true">上一页</a>
                    </li>
                {% endif %}

                {% for num in page_obj.paginator.page_range %}
                    {% if page_obj.number == num %}
                        <li class="page-item active">
                            <a class="page-link" href="#">{{ num }}</a>
                        </li>
                    {% else %}
                        <li class="page-item">
                            <a class="page-link" href="?page={{ num }}{% if request.GET.category %}&category={{ request.GET.category }}{% endif %}{% if request.GET.search %}&search={{ request.GET.search }}{% endif %}">{{ num }}</a>
                        </li>
                    {% endif %}
                {% endfor %}

                {% if page_obj.has_next %}
                    <li class="page-item">
                        <a class="page-link" href="?page={{ page_obj.next_page_number }}{% if request.GET.category %}&category={{ request.GET.category }}{% endif %}{% if request.GET.search %}&search={{ request.GET.search }}{% endif %}">下一页</a>
                    </li>
                {% else %}
                    <li class="page-item disabled">
                        <a class="page-link" href="#" tabindex="-1" aria-disabled="true">下一页</a>
                    </li>
                {% endif %}
            </ul>
        </nav>
    {% endif %}
{% endblock %}